<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>产品总览</title>
    <link rel="stylesheet" href="./src/css/bootstrap.min.css">
    <link rel="stylesheet" href="./src/css/index.css">
    <script src="./src/js/jquery-1.10.2.min.js"></script>
    <script src="./src/js/setScale.js"></script>
</head>

<body>
    <div class="wrapper">
        <div class="global-content">
            <header>
                <img src="./src/img/logo.png" alt="">
                <div class="user-info">
                    <p>你好，陈月华</p>
                    <p>
                        <a href="javascript:;"> <img style="width:11px;height: auto;" src="./src/img/key.png" alt="">
                            修改密码</a>
                        <a href="javascript:;"> <img style="width:13px;height: auto" src="./src/img/logout.png" alt="">
                            退出系统</a>
                    </p>
                </div>
            </header>
            <div class="cp-wrapper clearfix">
                <nav class="left-nav">
                    <div class="nav-item">
                        <a href="javascript:;" class="">
                            <span class="img-box sdfx"></span>
                            <span class="badge">1</span>
                            <p>散点风险</p>
                        </a>

                    </div>
                    <div class="nav-item">
                        <a href="javascript:;">
                            <span class="img-box cpfx"></span>
                            <span class="badge">22</span>
                            <p>产品风险</p>
                        </a>

                    </div>
                    <div class="nav-item">
                        <a href="javascript:;">
                            <span class="img-box qyfx"></span>
                            <p>企业风险</p>
                        </a>

                    </div>
                    <div class="nav-item">
                        <a href="javascript:;">
                            <span class="img-box lyts"></span>
                            <p>领域态势</p>
                        </a>

                    </div>
                    <div class="nav-item">
                        <a href="javascript:;">
                            <span class="img-box qyts"></span>
                            <p>区域态势</p>
                        </a>

                    </div>
                    <div class="nav-item">
                        <a href="javascript:;">
                            <span class="img-box cyzl"></span>
                            <p>产业总览</p>
                        </a>

                    </div>
                </nav>
                <div class="right-content clearfix">
                    <div class="cp-box-left">
                        <div class="cp-box-item">
                            <p class="cp-box-item-tit">产业现状</p>
                            <div id="map" class="map-box" style="width: 100%;height:100%;"></div>
                            <div class="cp-btn-group">
                                <a href="javascript:;">高风险</a>
                                <a href="javascript:;">企业详情</a>
                            </div>
                            <div class="cp-list-box">
                                <div class="cp-list-tab">
                                    <a class="on" href="javascript:;">企业</a>
                                    <a href="javascript:;">产品</a>
                                </div>
                                <div class="cp-list-con">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>药品生产
                                                    <p>31,071</p>
                                                </td>
                                                <td>药品批发
                                                    <p>31,071</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>药品零售连锁
                                                    <p>31,071</p>
                                                </td>
                                                <td>药品单体药店
                                                    <p>31,071</p>
                                                </td>
                                            </tr>
                                            </tr>
                                            <tr>
                                                <td>医疗器械生产
                                                    <p>31,071</p>
                                                </td>
                                                <td>医疗器械经营
                                                    <p>31,071</p>
                                                </td>
                                            </tr>
                                            </tr>
                                            <tr>
                                                <td>化妆品生产
                                                    <p>31,071</p>
                                                </td>

                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                        </div>
                        <div class="cp-box-item">
                            <p class="cp-box-item-tit">区域数据对比</p>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default on">企业</button>
                                <button type="button" class="btn btn-default">产品</button>
                            </div>
                            <div id="main1" style="width: 100%;height:100%;"></div>

                        </div>
                    </div>
                    <div class="cp-box-right">
                        <div class="cp-box-item">
                            <p class="cp-box-item-tit">历年产值利润</p>
                            <div id="main2" style="width: 100%;height:100%;"></div>
                        </div>
                        <div class="cp-box-item">
                            <p class="cp-box-item-tit">历年企业数量</p>
                            <div id="main3" style="width: 100%;height:100%;"></div>
                        </div>
                        <div class="cp-box-item">
                            <p class="cp-box-item-tit">历年产品变化趋势</p>
                            <div id="main4" style="width: 100%;height:100%;"></div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
    <script src="./src/js/echarts.min.js"></script>
    <script>
        $(function () {
            $('.cp-list-tab').on('click', 'a', function () {
                $(this).addClass('on').siblings().removeClass('on')
            })
            $('.btn-group').on('click', 'button', function () {
                $(this).addClass('on').siblings().removeClass('on');
                if (!$(this).index()) {
                    showBar({
                        id: "main1",
                        unit: '单位：家',
                        xData: ["杭州", "宁波", "温州", "湖州", "嘉兴", "杭州", "宁波", "温州", "湖州", "嘉兴"],

                        isStack: false,

                        value: [{
                                name: '药品生产企业',
                                value: [1, 2, 9, 235, 6, 1, 2, 9, 235, 6]
                            },
                            {
                                name: '药品流通企业',
                                value: [1, 122, 9, 15, 6, 1, 2, 9, 235, 6]
                            },
                            {
                                name: '医疗器械企业',
                                value: [1, 1, 2, 9, 235, 6, 32, 9, 51, 6]
                            }, {
                                name: '化妆品企业',
                                value: [1, 2, 9, 1, 2, 9, 235, 6, 5, 6]
                            }
                        ],
                        lineColor: ['#05D187', '#29A1F7', '#FF9722', '#EB3432']

                    })
                } else {
                    showBar({
                        id: "main1",
                        unit: '单位：家',
                        xData: ["杭州", "宁波", "温州", "湖州", "嘉兴", "杭州", "宁波", "温州", "湖州", "嘉兴"],

                        isStack: false,

                        value: [{
                                name: '药品',
                                value: [1, 2, 9, 235, 6, 1, 2, 9, 235, 6]
                            },
                            {
                                name: '医疗器械',
                                value: [1, 122, 9, 15, 6, 1, 2, 9, 235, 6]
                            },
                            {
                                name: '化妆品',
                                value: [1, 1, 2, 9, 235, 6, 32, 9, 51, 6]
                            }
                        ],
                        lineColor: ['#05D187', '#FF9722', '#EB3432', '#EB3432']

                    })
                }
            })

            showmap();
            // 区域数据对比
            showBar({
                id: "main1",
                unit: '单位：家',
                xData: ["杭州", "宁波", "温州", "湖州", "嘉兴", "杭州", "宁波", "温州", "湖州", "嘉兴"],

                isStack: false,

                value: [{
                        name: '药品生产企业',
                        value: [1, 2, 9, 235, 6, 1, 2, 9, 235, 6]
                    },
                    {
                        name: '药品流通企业',
                        value: [1, 122, 9, 15, 6, 1, 2, 9, 235, 6]
                    },
                    {
                        name: '医疗器械企业',
                        value: [1, 1, 2, 9, 235, 6, 32, 9, 51, 6]
                    }, {
                        name: '化妆品企业',
                        value: [1, 2, 9, 1, 2, 9, 235, 6, 5, 6]
                    }
                ],
                lineColor: ['#05D187', '#29A1F7', '#FF9722', '#EB3432']

            })
            // 历年产值利润
            showLine({
                id: "main2",
                unit: '单位：亿元',
                xData: ["2014", "2014", "2014", "2014", "2014"],
                isStack: true,
                value: [{
                        name: '产值',
                        value: [1, 2, 9, 235, 6, 1]
                    },
                    {
                        name: '利润',
                        value: [1, 122, 9, 15, 6, 1]
                    }
                ],
                lineColor: ['#FF292A', '#00C601', '#FF9722', '#EB3432']

            })
            // 历年企业数量
            showBar2({
                id: "main3",
                unit: '单位：家',
                xData: ["药品生产\n企业", "药品流通\n企业", "医疗器械\n企业 ", "化妆品\n企业"],

                isStack: false,

                value: [{
                        name: '2015',
                        value: [1, 2, 9, 235, ]
                    },
                    {
                        name: '2016',
                        value: [1, 122, 9, 15, ]
                    },
                    {
                        name: '2017',
                        value: [1, 1, 2, 9, ]
                    }, {
                        name: '2018',
                        value: [1, 2, 9, 1, ]
                    }, {
                        name: '2019',
                        value: [1, 2, 9, 1, ]
                    }
                ],
                lineColor: ['#B1D321', '#F5A623', '#2289F2', '#9013FE', '#00C601']

            })
            // 历年产品变化趋势

            showBar3({
                id: "main4",
                unit: '单位：个',
                xData: ["药品", "医疗器械", "化妆品"],

                isStack: false,

                value: [{
                        name: '2015',
                        value: [1, 2, 2]
                    },
                    {
                        name: '2016',
                        value: [1, 122, 3]
                    },
                    {
                        name: '2017',
                        value: [1, 1, 4]
                    },
                    {
                        name: '2018',
                        value: [1, 1, 4]
                    }, {
                        name: '2010',
                        value: [1, 1, 4]
                    }
                ],
                lineColor: ['#B1D321', '#F5A623', '#2289F2', '#9013FE', '#00C601']

            })
        })


        function showmap(param) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('map'));
            // 指定图表的配置项和数据


            /**
             此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点和区域显示tooltip的效果

             默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。
             当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。

             http://echarts.baidu.com/option.html#series-map.geoIndex

             并且加了pin气泡图标以示数值大小
             */

            myChart.showLoading();
            $.getJSON('./zhejiang.json', function (geoJson) {
                echarts.registerMap('zj', geoJson);
                myChart.hideLoading();
                var option = {
                    legend: {

                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            return params.data.name.concat('<br/>').concat('行业企业数：' + params
                                    .data.value)
                                .concat('<br/>' + '产品注册数：' + params.data.value2)
                        },
                        textStyle: {
                            fontSize: 16
                        }
                    },

                    visualMap: {
                        show: false,
                        min: 0,
                        // max: 500,
                        inRange: {
                            color: ['#0A0D49', '#025ED4']
                        },

                    },


                    series: [{
                            type: 'map',
                            map: 'zj',
                            left: '50%',

                            aspectScale: 0.75, //长宽比
                            showLegendSymbol: false, // 存在legend时显示
                            label: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 16,
                                    }
                                },
                            },
                            roam: true,
                            animation: false,
                            itemStyle: {
                                normal: {
                                    color: '#05C3F9',
                                    areaColor: '#031525',
                                    shadowBlur: 2,
                                    borderColor: '#05C3F9',
                                    shadowColor: '#05C3F9',

                                },
                                emphasis: {
                                    areaColor: '#2B91B7'
                                }
                            },
                            data: [{
                                name: '杭州市',
                                value: 1232,
                                value2: 23
                            }]
                        }

                    ]
                };
                myChart.setOption(option);
                $(window).on('resize', function () {
                    myChart.resize()
                })
            });

            // 使用刚指定的配置项和数据显示图表。


        }



        function showBar(cfg) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(cfg.id));
            // 指定图表的配置项和数据
            var legData = [];
            var sArrat = []
            $.each(cfg.value, function (index, value) {
                if (cfg.isStack) {
                    legData.push(value.name)
                    sArrat.push({
                        name: value.name,
                        type: "bar",

                        barWidth: 30,
                        data: value.value
                    })
                } else {
                    legData.push(value.name)
                    sArrat.push({
                        name: value.name,
                        type: "bar",
                        data: value.value
                    })
                }

            })
            var option = {
                title: {
                    text: cfg.title || '',
                    textStyle: {
                        color: "#1178C9",
                        fontSize: 16,
                    },
                    left: 10,
                    top: 5
                },
                grid: {
                    top: 110,
                    left: 50,
                    right: 50,
                    bottom: 30
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: 'shadow'
                    },
                    textStyle: {
                        fontSize: 16
                    }
                },
                legend: {
                    data: legData,
                    left: 'center',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16,
                    },

                    itemWidth: 14,
                    itemHeight: 8,
                    top: 50
                },
                xAxis: {
                    data: cfg.xData,
                    //   boundaryGap: false,
                    axisLabel: {
                        color: "#FFFFFF",
                        textStyle: {
                            color: '#fff',
                            fontSize: 16,
                        }
                    },
                    axisTick: {
                        show: true,
                        lineStyle: {}
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#1178C9"
                        }
                    }
                },
                color: cfg.lineColor,
                yAxis: {
                    name: cfg.unit,

                    nameTextStyle: {
                        color: "#FFFFFF",
                        fontSize: 16
                    },
                    splitLine: {
                        show: false
                    },
                    splitNumber: 5,
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(0,70,255,0.15)', 'rgba(0,70,255,0)']
                        }
                    },
                    axisLabel: {
                        color: "#FFFFFF",
                        textStyle: {
                            color: '#fff',
                            fontSize: 16,
                        }
                    },
                    axisTick: {
                        show: false,
                        lineStyle: {}
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#1178C9"
                        }
                    }
                },
                series: sArrat
            };
            if (cfg.max) {
                option.yAxis.max = cfg.max
            }

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function showBar2(cfg) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(cfg.id));
            // 指定图表的配置项和数据
            var legData = [];
            var sArrat = []
            $.each(cfg.value, function (index, value) {
                if (cfg.isStack) {
                    legData.push(value.name)
                    sArrat.push({
                        name: value.name,
                        type: "bar",

                        barWidth: 30,
                        data: value.value
                    })
                } else {
                    legData.push(value.name)
                    sArrat.push({
                        name: value.name,
                        type: "bar",
                        data: value.value
                    })
                }

            })
            var option = {

                grid: {
                    top: 110,
                    left: 50,
                    right: 10,
                    bottom: 40
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: 'shadow'
                    },
                    textStyle: {
                        fontSize: 16
                    }
                },
                legend: {
                    data: legData,
                    left: 'center',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16,
                    },
                    itemGap: 5,
                    itemWidth: 14,
                    itemHeight: 8,
                    top: 50
                },
                xAxis: {
                    data: cfg.xData,
                    //   boundaryGap: false,
                    axisLabel: {
                        color: "#FFFFFF",
                        textStyle: {
                            color: '#fff',
                            fontSize: 16,
                        }
                    },
                    axisTick: {
                        show: true,
                        lineStyle: {}
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#1178C9"
                        }
                    }
                },
                color: cfg.lineColor,
                yAxis: {
                    name: cfg.unit,

                    nameTextStyle: {
                        color: "#FFFFFF",
                        fontSize: 16
                    },
                    splitLine: {
                        show: false
                    },
                    splitNumber: 5,
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(0,70,255,0.15)', 'rgba(0,70,255,0)']
                        }
                    },
                    axisLabel: {
                        color: "#FFFFFF",
                        textStyle: {
                            color: '#fff',
                            fontSize: 16,
                        }
                    },
                    axisTick: {
                        show: false,
                        lineStyle: {}
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#1178C9"
                        }
                    }
                },
                series: sArrat
            };
            if (cfg.max) {
                option.yAxis.max = cfg.max
            }

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }


        function showBar3(cfg) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(cfg.id));
            // 指定图表的配置项和数据
            var legData = [];
            var sArrat = []
            $.each(cfg.value, function (index, value) {
                if (cfg.isStack) {
                    legData.push(value.name)
                    sArrat.push({
                        name: value.name,
                        type: "bar",

                        barWidth: 30,
                        data: value.value
                    })
                } else {
                    legData.push(value.name)
                    sArrat.push({
                        name: value.name,
                        type: "bar",
                        data: value.value
                    })
                }

            })
            var option = {

                grid: {
                    top: 110,
                    left: 50,
                    right: 10,
                    bottom: 30
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: 'shadow'
                    },
                    textStyle: {
                        fontSize: 16
                    }
                },
                legend: {
                    data: legData,
                    left: 'center',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16,
                    },
                    itemGap: 5,
                    itemWidth: 14,
                    itemHeight: 8,
                    top: 70
                },
                xAxis: {
                    data: cfg.xData,
                    //   boundaryGap: false,
                    axisLabel: {
                        color: "#FFFFFF",
                        textStyle: {
                            color: '#fff',
                            fontSize: 16,
                        }
                    },
                    axisTick: {
                        show: true,
                        lineStyle: {}
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#1178C9"
                        }
                    }
                },
                color: cfg.lineColor,
                yAxis: {
                    name: cfg.unit,

                    nameTextStyle: {
                        color: "#FFFFFF",
                        fontSize: 16
                    },
                    splitLine: {
                        show: false
                    },
                    splitNumber: 5,
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(0,70,255,0.15)', 'rgba(0,70,255,0)']
                        }
                    },
                    axisLabel: {
                        color: "#FFFFFF",
                        textStyle: {
                            color: '#fff',
                            fontSize: 16,
                        }
                    },
                    axisTick: {
                        show: false,
                        lineStyle: {}
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#1178C9"
                        }
                    }
                },
                series: sArrat
            };
            if (cfg.max) {
                option.yAxis.max = cfg.max
            }

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }



        function showLine(cfg) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(cfg.id));
            // 指定图表的配置项和数据
            var legData = [];
            var sArrat = []
            $.each(cfg.value, function (index, value) {
                if (cfg.isStack) {
                    legData.push(value.name)
                    sArrat.push({
                        name: value.name,
                        type: "line",

                        barWidth: 30,
                        data: value.value
                    })
                } else {
                    legData.push(value.name)
                    sArrat.push({
                        name: value.name,
                        type: "line",
                        data: value.value
                    })
                }

            })
            var option = {

                grid: {
                    top: 110,
                    left: 50,
                    right: 20,
                    bottom: 30
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: 'shadow'
                    },
                    textStyle: {
                        fontSize: 16
                    }
                },
                legend: {
                    data: legData,
                    left: 'center',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16,
                    },
                    itemGap: 5,
                    itemWidth: 14,
                    itemHeight: 8,
                    top: 50
                },
                xAxis: {
                    data: cfg.xData,
                    boundaryGap: false,
                    axisLabel: {
                        color: "#FFFFFF",
                        textStyle: {
                            color: '#fff',
                            fontSize: 16,
                        }
                    },
                    axisTick: {
                        show: true,
                        lineStyle: {}
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#1178C9"
                        }
                    }
                },
                color: cfg.lineColor,
                yAxis: {
                    name: cfg.unit,

                    nameTextStyle: {
                        color: "#FFFFFF",
                        fontSize: 16
                    },
                    splitLine: {
                        show: false
                    },
                    splitNumber: 5,
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(0,70,255,0.15)', 'rgba(0,70,255,0)']
                        }
                    },
                    axisLabel: {
                        color: "#FFFFFF",
                        textStyle: {
                            color: '#fff',
                            fontSize: 16,
                        }
                    },
                    axisTick: {
                        show: false,
                        lineStyle: {}
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#1178C9"
                        }
                    }
                },
                series: sArrat
            };
            if (cfg.max) {
                option.yAxis.max = cfg.max
            }

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    </script>

</body>

</html>